<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <span class="clearfix" style="font-weight: bold;font-size: 30px">返乡申请信息填写</span>
                <el-button @click="submitBackInfo"
                           style="float: right; padding: 3px 0;font-weight: bold;font-size: 15px" type="text">提交
                </el-button>
            </div>
            <div class="clearfix">
                <el-row>
                    <el-col :span="24">
                        <el-form ref="form" :model="backHomeInfo" label-width="100px" size="mini"
                                 style="width: 700px">
                            <el-form-item label="姓名：">
                                <el-input v-model="backHomeInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式：">
                                <el-input v-model="backHomeInfo.tel"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="核酸检测：">
                                        <el-radio-group v-model="backHomeInfo.nat">
                                            <el-radio label="阴性" style="color: #02ff0f"></el-radio>
                                            <el-radio label="阳性" style="color: #ff0202"></el-radio>
                                            <el-radio label="未做" style="color: #808080"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="健康状况：">
                                        <el-radio-group v-model="backHomeInfo.health">
                                            <el-radio label="健康" style="color: #02ff0f"></el-radio>
                                            <el-radio label="确诊" style="color: #ff0202"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="出发地址">
                                <el-input type="textarea" v-model="backHomeInfo.startingAddress"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="出发日期">
                                        <el-date-picker
                                                v-model="backHomeInfo.startingTime"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="到达日期">
                                        <el-date-picker
                                                v-model="backHomeInfo.endingTime"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="返乡前14天活动轨迹信息">
                                <el-input type="textarea" v-model="backHomeInfo.daysAgo"
                                          placeholder="详细填写时间、地点等信息"></el-input>
                            </el-form-item>
                            <el-form-item label="乘坐交通工具">
                                <el-input type="textarea" v-model="backHomeInfo.vehicle"
                                          placeholder="含转车等所有车牌、车次、轮渡、航班信息；私家车返回，需提供车牌号及途经线路,请注意保留所有相关票据"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-checkbox v-model="checked"
                                     style="padding-left: 15%;color: red;font-size: 20px;font-weight: bold">
                            本人保证此表格填写内容真实、完整、可靠，如有不实之处，愿承担一切法律责任。
                        </el-checkbox>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "backHome",
        data() {
            return {
                backHomeInfo: {
                    name: "",
                    tel: "",
                    nat: "",/*核酸检测*/
                    health: "",
                    startingAddress: "",
                    startingTime: "",
                    endingTime: "",
                    vehicle: "",
                    daysAgo: "",
                },
                checked: false,
            }
        },
        methods: {
            async submitBackInfo() {
                if (this.backHomeInfo.name !== "" && this.backHomeInfo.tel !== "" && this.backHomeInfo.endingTime !== "" && this.backHomeInfo.startingTime !== "" && this.backHomeInfo.startingAddress !== "" && this.backHomeInfo.health !== "" && this.backHomeInfo.nat !== "" && this.backHomeInfo.daysAgo !== "" && this.backHomeInfo.vehicle !== "") {
                    if (this.checked === false) {
                        this.$message.error("请勾选保证")
                    } else {
                        console.log(this.backHomeInfo)
                        const {data: res} = await this.$http.post("addBackHomeApply",this.backHomeInfo);
                        if (res === "ok") {
                            this.backHomeInfo.name = ""
                            this.backHomeInfo.tel = ""
                            this.backHomeInfo.endingTime= ""
                            this.backHomeInfo.startingTime = ""
                            this.backHomeInfo.startingAddress = ""
                            this.backHomeInfo.health = ""
                            this.backHomeInfo.nat = ""
                            this.backHomeInfo.daysAgo = ""
                            this.backHomeInfo.vehicle = ""
                            this.$message.success("提交成功");
                        } else {
                            this.$message.error("提交失败");
                        }
                    }
                } else {
                    this.$message.error("请完整的填写反乡信息")
                }
                /*console.log(this.backHomeInfo)
                console.log(this.checked)*/
            }
        }
    }
</script>

<style scoped>
    .box-card {
        background-color: #d5e7f6;
    }

    .clearfix {
        display: flex;
        align-items: center;
        justify-content: center
    }
</style>